<template>
	<view class="user-container">
		<!-- 头部头像与登录 -->
		<view class="header">
			<image :src="avatar" @click="changeAvatar"></image>
			<view class="username" v-if="JSON.stringify(loginStore.UserInfo) !== '{}'">
				用户名:{{loginStore.UserInfo.username}}</view>
			<view class="login" @click="loginStore.goLogin()" v-if="JSON.stringify(loginStore.UserInfo) === '{}'">立即登录
			</view>
			<view class="setting" v-if="JSON.stringify(loginStore.UserInfo) !== '{}'">
				<image src="/static/images/setting.png" @click="loginStore.goSetting()" />
			</view>
		</view>
		<!-- 用户信息 -->
		<view class="userinfo">
			<view class="info-item" @click="goOrder">
				<image src="/static/images/order.png" />
				<view class="info-text">我的订单</view>
			</view>
			<view class="info-item" @click="cartStore.goSite()">
				<image src="/static/images/site.png" />
				<view class="info-text">我的地址</view>
			</view>
			<view class="info-item" @click="goHistory">
				<image src="/static/images/foot.png" />
				<view class="info-text">我的足迹</view>
			</view>
		</view>

		<!-- 分割线 -->
		<view class="divider-container">
			<view class="divider-line"></view>
			<view class="divider-text">为你推荐</view>
			<view class="divider-line"></view>
		</view>

		<!-- 商品列表 -->
		<view class="good-list">
			<view class="good-item" v-for="item in userStore.goodListData" :key="item.id"
				@click="detailStore.goDetail(item.id)">
				<view class="good-image">
					<image :src="item.img_url" />
				</view>
				<view class="text">
					<view class="title">{{item.title}}</view>
					<view class="other">
						<view class="price">￥{{item.sell_price}}</view>
						<view class="count">{{item.buy}}人购买</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useUserStore,
		useLoginStore,
		useDetailStore,
		useCartStore
	} from '../../stores/store.js'
	import {
		reqUploadAvatar
	} from '../../api/user.api.js'

	const userStore = useUserStore()
	const loginStore = useLoginStore()
	const detailStore = useDetailStore()
	const cartStore = useCartStore()

	onLoad(() => {
		userStore.getGoodListData()
	})
	onShow(() => {
		cartStore.updateTabBarBadge()
	})
	const avatar = computed(() => {
		if (JSON.stringify(loginStore.UserInfo) !== '{}') {
			return 'http://47.98.187.80:5000/' + loginStore.UserInfo.avatar
		} else {
			return '/static/images/defaultavatar.png'
		}
	})

	// 跳转足迹
	const goHistory = () => {
		uni.navigateTo({
			url: '/pages/history/history'
		})
	}

	// 跳转订单
	const goOrder = () => {
		uni.navigateTo({
			url: '/pages/order/order'
		})
	}

	// 上传头像
	const changeAvatar = async () => {
		if (!loginStore.Token) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			return;
		}

		try {
			const res = await uni.chooseImage({
				count: 1
			});
			if (!res.tempFilePaths?.length) return;

			// isUploading.value = true;
			const uploadRes = await reqUploadAvatar(res.tempFilePaths[0]);
			if (uploadRes.code === 200) {
				// 更新本地存储的头像信息
				let userInfo = loginStore.UserInfo
				userInfo.avatar = uploadRes.data.avatarUrl
				loginStore.UserInfo = userInfo
				avatar.value = uploadRes.data.avatarUrl
				uni.showToast({
					title: '上传成功',
					icon: 'success'
				});
			}
		} catch (error) {
			uni.showToast({
				title: error.message || '上传失败',
				icon: 'none'
			});
		}
	};
</script>

<style lang="scss">
	page {}

	.user-container {
		background-color: #f0eded;

		// 头部头像和登录
		.header {
			width: px2rpx(375);
			height: px2rpx(88);
			background-image: linear-gradient(to right, #c7bca1, #d5d5b7);
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: px2rpx(60);
				height: px2rpx(60);
				margin-left: px2rpx(10);
			}

			.login {
				width: px2rpx(88);
				height: px2rpx(44);
				background-color: red;
				border-radius: px2rpx(20);
				margin-right: px2rpx(10);
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.setting {
				margin-bottom: px2rpx(35);

				image {
					width: px2rpx(40);
					height: px2rpx(40);
				}
			}

		}

		// 用户信息
		.userinfo {
			width: px2rpx(375);
			height: px2rpx(76);
			background-color: #fff;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.info-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: px2rpx(30);
					height: px2rpx(30);
				}

				.info-text {
					font-size: px2rpx(14);
				}
			}
		}

		// 为你推荐
		.divider-container {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			/* 白色背景 */
			padding: px2rpx(15) 0;

			.divider-line {
				flex: 1;
				height: 1px;
				background-color: #ccc;
			}

			.divider-text {
				padding: 0 px2rpx(20);
				color: #999;
				font-size: px2rpx(16);
			}
		}

		// 商品列表
		.good-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding: px2rpx(2);

			.good-item {
				width: px2rpx(170);
				height: px2rpx(265);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-color: #fff;
				border-radius: px2rpx(16);
				margin: px2rpx(6);
				overflow: hidden;

				.good-image {
					width: 100%;
					height: px2rpx(206);


					image {
						width: 100%;
						height: px2rpx(170);
					}
				}

				.text {
					display: flex;
					flex-direction: column;
					padding: px2rpx(2);

					.title {
						height: px2rpx(14);
						width: px2rpx(170);
						font-size: px2rpx(12);
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.other {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: px2rpx(42);
						width: px2rpx(170);
						padding: px2rpx(4);

						.price {
							font-size: px2rpx(14);
							color: #f50;
						}

						.count {
							font-size: px2rpx(12);
							color: #999;
							margin-right: px2rpx(10);
						}
					}

				}
			}
		}

	}
</style>